<template>
	<view class="logistics">
		<view class="expressage">
			<view class="picture">
				<image src="../../static/img/kuaidid.png" mode=""></image>
			</view>
			<view class="title">{{title}}</view>
			<view class="num">
				<view>单号：{{order}}</view>
				<view class="copy" @click="copy(order)">复制</view>
			</view>
		</view>
		<view class="address">
			<view class="picture">
				<image class="picture" src="../../static/icon/daohang12.png" mode=""></image>
			</view>
			<view class="num">
				<view>收货地址： {{address}}</view>
			</view>
		</view>
		<!-- 步骤信息 -->
		<!-- <view class="info">
			<u-time-line>
				<u-time-line-item nodeTop="18" v-for='(item,index) in orderInfo' :key='index'>
					<template v-slot:node v-if="item.icon">
						<view class="u-node" style="background: #F8124A;" v-if="item.icon">
							<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
	
					<template v-slot:content>
						<view v-if="item.state">
							<view class="no">{{item.status}}</view>
							<view class="u-order-desc" style="color: #F8124A;">{{item.context}}</view>
							<view class="u-order-time" style="color: #F8124A;">{{item.time}}</view>
						</view>
						<view v-else>
							<view class="u-order-title">{{item.status}}</view>
							<view class="u-order-desc">{{item.context}}</view>
							<view class="u-order-time">{{item.time}}</view>
						</view>
					</template>
	
				</u-time-line-item>
			</u-time-line>
		</view> -->
	</view>
</template>

<script>
	// import service from '@/store/service.js';
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
	export default {
		data() {
			return {
				title: '',
				active: 0,
				company: '',
				order: '',
				orderInfo: [],
				address: ''
			}
		},
		components: {},
		onLoad(e) {
			this.getExpressQuery(e.oid)
		}, 
		methods: {
			getExpressQuery(oid) {
				this.$Request.post(this.$api.order.expressQuery, {
						order_id: oid
					}).then(
					res => {
						console.log(res);
						const order = res.data.order
						this.address = order.express_province + order.express_city + order.express_area + order.express_address
						this.order = order.express_send_no
						this.title = order.express_company_title
						this.orderInfo = res.data.express_info
						this.orderInfo.map(item => {
							if (item == this.orderInfo[this.orderInfo.length - 1]) {
								this.$set(item, 'state', true)
							}
						})
					},
					err => {
						console.log('err: ' + JSON.stringify(err));this.$utils.showMsg(err.data.info);
					}
				);
			},
			//复制
			copy(num) {
				// console.log(num);
				let self = this;
				self.codeNum = num;
				console.log(self.codeNum);
				uniCopy({
					content: self.codeNum,
					success: res => {
						uni.showToast({
							title: res,
							icon: 'none'
						});
					},
					error: e => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @/js_sdk/xb-copy/uni-copy.js
	// @import '@/common/uni.css';

	page {
		height: 100%;
		overflow: hidden;

		.logistics {
			height: 100%;
			background-color: #F4F4F4;
			overflow: auto;

			.expressage {
				position: relative;
				width: 690upx;
				height: 152upx;
				background-color: #ffffff;
				border-radius: 14upx;
				margin: 30upx auto;
				box-sizing: border-box;

				.picture {
					position: absolute;
					top: 40upx;
					left: 10upx;
					width: 78upx;
					height: 78upx;

					image {
						width: 78upx;
						height: 78upx;
						border: 1upx solid #EEEEEE;
					}
				}

				.title {
					position: absolute;
					top: 32upx;
					left: 127upx;
					font-size: 29upx;
					color: #F8124A;
					font-weight: bold;
				}

				.num {
					position: absolute;
					top: 85upx;
					left: 0upx;
					margin-left: 128upx;
					color: rgba(0, 0, 0, .9);
					font-size: 28upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

		}
	}

	.copy {
		position: absolute;
		left: 360upx;
		width: 78upx;
		height: 42upx;
		text-align: center;
		line-height: 35upx;
		border: 1upx solid rgba(181, 181, 181, 1);
		border-radius: 6px;
		color: #666666;
	}

	.info {
		margin: 30upx;
		padding: 30upx 45upx;
		background-color: #ffffff;
		border-radius: 14upx;

	}

	//时间轴
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		font-size: 32rpx;
	}

	.no {
		color: #F8124A;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: #656565;
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: #999999;
		font-size: 26rpx;
	}

	/deep/.u-node {
		position: absolute;
		top: -6px;
	}

	.address {
		position: relative;
		width: 690upx;
		height: 100upx;
		background-color: #ffffff;
		border-radius: 14upx;
		margin: 30upx auto;
		box-sizing: border-box;

		.picture {
			position: absolute;
			top: 14upx;
			left: 15upx;
			width: 48upx;
			height: 48upx;

			image {
				width: 48upx;
				height: 48upx;
			}
		}

		.title {
			position: absolute;
			top: 32upx;
			left: 127upx;
			font-size: 29upx;
			color: #26B614;
			font-weight: bold;
		}

		.num {
			position: absolute;
			top: 26upx;
			left: 96upx;
			color: rgba(0, 0, 0, .7);
			font-size: 28upx;
		}
	}
</style>
